<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            ul {
                padding: 0;
                margin: 0;
                list-style: none;
            }

            .options li {
                float: left;
                width: 100px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                border: solid 1px #ddd;
            }

            .items li {
                width: 405px;
                height: 405px;
                display: none;
                border: solid 1px #ddd;
            }
        </style>
    </head>
    <body>
        <ul class='options'>
            <li data-type="0" style='background-color: #25bb9b;'>题库</li>
            <li data-type="1">面试</li>
            <li data-type="2">学习</li>
            <li data-type="3">求职</li>
        </ul>
        <ul class='items'>
            <li style="display: block;">牛客题库，包含编程题、选择题等</li>
            <li>为你的面试提供一站式服务</li>
            <li>校招学习来牛客</li>
            <li>求职中有什么难题，可以联系我们</li>
        </ul>

        <script>
            /**
             * 这是一道简单且恶心的题，
             * 为什么说它简单呢，因为就是个条件判断点击事件，
             * 又为什么说它恶心呢，因为为了测评方便它是通过冒在父组件泡捕捉的，
             * click直接绑定在需要点击的dom上直接寄，不理解也不尊重💩💩
             * 题目里面也是一点没说明，不看错误测例鬼知道怎么错的
             * 这里有个小点要注意，怎么获取DOm中data-type的值呢？
             * 如果是当前DOM,e.getAttribute('data-type')或者this.getAttribute('data-type')即可
             * 倘若像这样使用的是事件委托呢？通过target属性访问即可
             * 
             * 细心的小友肯定看出来了，题目默认给的类数组对象本身就进行了转化
             * 如果不转化是不能直接forEach遍历的
             * [].slice.call：返回一个包含类数组对象元素的真正数组副本,浅拷贝，小本本记下来以后封装成函数方便使用
             */
            var options = document.querySelector('.options');
            var optionItems = [].slice.call(document.querySelectorAll('.options li'));
            var items = [].slice.call(document.querySelectorAll('.items li'));
            // 补全代码
            optionItems.forEach((item, index)=> {
                options.onclick = (e)=> {
                    let indexOut = Number(e.target.getAttribute('data-type'));
                    optionItems.forEach((item,index)=>{
                        if(indexOut===index) item.style.backgroundColor = '#25bb9b';
                        else item.style.backgroundColor = '#fff';
                    });
                    items.forEach((item,index)=>{
                        if(indexOut===index) item.style.display = 'block';
                        else item.style.display = 'none';
                    });  
                }
            })
            function aaa() {  var event ={target: optionItems[2]}; options.onclick(event);  var result = optionItems[2].style.backgroundColor == 'rgb(37, 187, 155)';  return result; }
            console.log(aaa());
        </script>
    </body>
</html>